<ul class="toollist">
    <li><div class="listbox"><i class="iconfont icon-asset-management-the-asset-summary"></i><em>200<p>资产总数</p></em></div></li>
    <li><div class="listbox"><i class="iconfont icon-ERP_huokuanzongjine"></i><em>160W<p>资产金额</p></em></div></li>
    <li><div class="listbox"><i class="iconfont icon-fuquanshenpi_jiaodian"></i><em>198<p>待审批任务</p></em></div></li>
    <li><div class="listbox"><i class="iconfont icon-GIS-TL_weixiudian-"></i><em>10<p>报修资产数</p></em></div></li>
    <li><div class="listbox"><i class="iconfont icon-shijian-tianchong"></i><em>15<p>到期资产</p></em></div></li>
    <li><div class="listbox"><i class="iconfont icon-caigouleixingzhanbi"></i><em>70%<p>资产完好率</p></em></div></li>
</ul>

<ul class="chartlist" style="display: flex;">
    <li>
        <div class="chartbox">
            <div class="boxtitle"><span>仪表盘</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
            <div id="chart1" class="charts"></div>

            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('chart1'));
                // 指定图表的配置项和数据
                var
                    option1 = {
                        tooltip : {
                            formatter: "{a} <br/>{b} : {c}%"
                        },
                        series: [
                            {
                                name: '业务指标',
                                type: 'gauge',
                                "center":["50%","50%"],
                                radius:'100%',
                                detail: {formatter:'{value}%',textStyle:{fontSize:20}},
                                data: [{value: 50}]
                            }
                        ]
                    };
                setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
                    option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                    myChart.setOption(option1, true);
                }, 2000);
                myChart.setOption(option1);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            </script>

        </div>
    </li>

    <li>
        <div class="chartbox">
            <div class="boxtitle"><span>数据统计</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
            <div id="chart2" class="charts"></div>

            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('chart2'),'uimaker');
                // 指定图表的配置项和数据
                option = {

                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],

                    grid:{
                        x:60,
                        x2:40,
                        y:10,
                        height:140
                    },
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'成交',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:[10, 12, 21, 54, 260, 830, 710]
                        },
                        {
                            name:'预购',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:[30, 182, 434, 791, 390, 30, 10]
                        },
                        {
                            name:'意向',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:[1320, 1132, 601, 234, 120, 90, 20]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
                window.addEventListener("resize",function(){
                    myChart1.resize();
                });
            </script>

        </div>
    </li>

    <li>
        <div class="chartbox">
            <div class="boxtitle"><span>柱状图</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
            <div id="chart3" class="charts"></div>

            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart2 = echarts.init(document.getElementById('chart3'),'uimaker');

                // 指定图表的配置项和数据

                option = {
                    tooltip : {
                        trigger: 'item',
                        textStyle:{fontSize:14},
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },

                    grid:{
                        x:60,
                        x2:40,
                        y:10,
                        height:140
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'直接访问',
                            type:'bar',
                            data:[320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name:'邮件营销',
                            type:'bar',
                            stack: '广告',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'联盟广告',
                            type:'bar',
                            stack: '广告',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name:'视频广告',
                            type:'bar',
                            stack: '广告',
                            data:[150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name:'搜索引擎',
                            type:'bar',
                            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                            markLine : {
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            type: 'dashed'
                                        }
                                    }
                                },
                                data : [
                                    [{type : 'min'}, {type : 'max'}]
                                ]
                            }
                        },
                        {
                            name:'百度',
                            type:'bar',
                            barWidth : 5,
                            stack: '搜索引擎',
                            data:[620, 732, 701, 734, 1090, 1130, 1120]
                        },
                        {
                            name:'谷歌',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[120, 132, 101, 134, 290, 230, 220]
                        },
                        {
                            name:'必应',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name:'其他',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[62, 82, 91, 84, 109, 110, 120]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
                window.addEventListener("resize",function(){
                    myChart2.resize();
                });
            </script>

        </div>
    </li>
</ul>

<div class="infolist">

    <div class="infoleft">
        <div class="infoboxleft">
            <div class="boxtitle"><span>最新订单</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>

            <div class="boxdown">
                <table class="simpletable">

                    <thead>
                    <th>订单编号</th>
                    <th>订单金额(元)</th>
                    <th>下单时间</th>
                    <th>交易完成日期</th>
                    <th>卖家ID</th>
                    <th>操作</th>
                    </thead>

                    <tbody>

                    <tr>
                        <td>20171101</td>
                        <td>256</td>
                        <td>2017-11-01 16:35:26</td>
                        <td>2017-11-01</td>
                        <td>uimaker</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171102</td>
                        <td>300</td>
                        <td>2017-11-02 10:50:08</td>
                        <td>2017-11-02</td>
                        <td>admin</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171103</td>
                        <td>500</td>
                        <td>2017-11-03 00:00:14</td>
                        <td>2017-11-03</td>
                        <td>nanjing</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171104</td>
                        <td>1000</td>
                        <td>2017-11-04 16:22:00</td>
                        <td>2017-11-04</td>
                        <td>office</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171105</td>
                        <td>200</td>
                        <td>2017-11-05 04:00:00</td>
                        <td>2017-11-05</td>
                        <td>uimaker</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171106</td>
                        <td>150</td>
                        <td>2017-11-06 18:20:10</td>
                        <td>2017-11-06</td>
                        <td>guanliyuan</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171107</td>
                        <td>450</td>
                        <td>2017-11-07 08:34:00</td>
                        <td>2017-11-07</td>
                        <td>moodoc</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    <tr>
                        <td>20171108</td>
                        <td>500</td>
                        <td>2017-11-08 19:00:14</td>
                        <td>2017-11-08</td>
                        <td>iphonex</td>
                        <td><a href="#" >查看</a></td>
                    </tr>

                    </tbody>

                </table>
            </div>

        </div>
    </div>

    <div class="inforight">
        <div class="infoboxright">
            <div class="boxtitle"><span>通知公告</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>

            <ul class="textlist">
                <?php foreach($news as $v):?>
                <li><span></span><a href="#"><?php echo $v->title;?></a><i><?php echo substr($v->created_at, 0, 10);?></i></li>
                <?php endforeach;?>
            </ul>

        </div>
    </div>

</div>
<script>
    $(window).resize();
</script>
